<template>
  <div class="login-container">

    <video class="video" muted src="../../assets/video/1.mp4" loop="loop" autoplay="true"></video>
    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
      <h1 class="name1">老公管理系统</h1>
      <i @click="changeLoginType" :class="['jiaobiao', 'iconfont', jiaobiaoType]"></i>
      <!-- 常规登入 -->
      <CommonLogin v-if="loginType==='common'" ref="commonLogin"
       @syncLoginForm="handleSyncLoginForm" @submit="submit" 
       @changeSmsType="changeSmsType"/>
       <!-- 二维码登录 -->
      <QrLogin :storageUserInfo="storageUserInfo" v-else-if="loginType==='qrcode'"/>
      <!-- 短信登录 -->
      <SmsLogin :storageUserInfo="storageUserInfo" v-else/>
      
    </el-form>

  </div>

</template>
<script>
import * as api from "@/api/users"

import CommonLogin from "@/components/Login/commonLogin.vue";
import QrLogin from "@/components/Login/qrLogin.vue";
import SmsLogin from "@/components/Login/smsLogin.vue";
import storage from "@/utils/storage";
// 校验验证码
var validatecheckAge = (rule, value, callback) => {
  if (value.length !== 0) {
    callback()
  } else {
    callback('验证码不能为空')
  }
};
// 校验用户名
var validateUsername = (rule, value, callback) => {
  // 3-16字母数字下划线
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback()
  } else {
    callback('请输入3-16字母数字下划线')
  }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
  if (value.length >= 3) {
    callback()
  } else {
    callback('密码长度不能小于三位')
  }
};
export default {
  data() {
    return {
      //common常规登入 | qrcode二维码 | sms:短信验证码
			loginType: 'common',//登入方式
      // jiaobiao: "#icon-erweimajiaobiao",
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [
          { validator: validateUsername, trigger: "blur" }
        ],
        password: [
          { validator: validatePassword, trigger: "blur" }
        ],
        captcha: [
          { validator: validatecheckAge, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
   jiaobiaoType(){
      if(this.loginType==="common"){
        return 'icon-erweimajiaobiao'
      }
      if(this.loginType==="qrcode"||this.loginType==='sms'){
        return 'icon-diannaojiaobiao'
      }
   }
  },
  components: { CommonLogin, QrLogin, SmsLogin },
  methods: {
    changeSmsType() {
			this.loginType = 'sms'
		},
    changeLoginType() {
			if (this.loginType === "common") {
				this.loginType = 'qrcode'
			} else if (this.loginType === "qrcode") {
				this.loginType = 'common'
			} 
      else if (this.loginType === 'sms') {
				this.loginType = 'common'
			}
		},
    handleSyncLoginForm(newLoginForm) {
      this.loginForm = newLoginForm
    },
    // 表单提交
    submit() {
      this.$refs['loginForm'].validate((valid) => {

        if (valid) {
          // 本地校验通过
          // alert("submit!");
          api.verifyCaptcha(this.loginForm.captcha)
            .then(async res => {
              if (res.data.state) {
                let { username, password } = this.loginForm
                let res = await api.loginApi(username, password)
                //  登录成功



                if (res.data.state) {
                  // 存储用户信息到本地
                  this.storageUserInfo(res.data)
                  // 跳转到主页
                  this.$router.push("/")
                } else {

                }


              } else {
                this.$refs['commonLogin'].getCaptcha()
              }
            })
        }
        else {
          // 本地校验不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 封装一个方法用于存储用户信息和token
    storageUserInfo({ userInfo, token, permission }) {
      this.$store.commit('users/SET_USRINFO',userInfo)
      storage.set('userInfo', userInfo)
      storage.set('qf-token', token)
      storage.set('permission', permission)
      
    },

  },

}
</script>
<style lang="less" scoped>
html,
body,
#app,
.el-container {
  height: 100%;
  overflow: hidden;
}

.login-container {
  text-align: center;
  color: #fff;
}

.el-form {
  position: fixed;
  right: 10%;
  top: 25%;
  border-radius: 5px;
  width: 400px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 100px 0 50px 0;

  /deep/ .el-input__inner {
    width: 250px;
  }

  /deep/ .el-form-item__label {
    color: #fff;
  }
}

.video {
  // height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

}

.jiaobiao {
  font-size: 60px;
  color: rgb(255, 255, 255);
  position: absolute;
  right: -1px;
  top: -1px;
  cursor: pointer;
  opacity: .7;
}


/deep/ .el-button--primary {
  background: linear-gradient(90deg, #a2c1d6, #a2c1d6);
  width: 250px;
  border-color: #a2c1d6;

}

/deep/.name1 {
  margin: 0 0 60px 40px;
  text-align: center;
}

.name2 {
  margin: 0 0 60px 0;
  text-align: center;
}
</style>